import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import FlexLayout from './comp/FlexLayout';
import * as serviceWorker from './serviceWorker';
// import { Router, Route, withRouter } from 'react-router'
import { withRouter } from 'react-router'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

import Flex from './comp/Flex';
import 'antd/dist/antd.css';
// import { Layout } from 'antd';
import Bar from './d3/Bar';
import { Circle } from 'rc-progress';

import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import D3s from './d3/D3s';
import Selection from './d3/Selection';
import transition from './d3/transition';
import Maths from './d3/Maths';
import basic from './d3/test/basic';
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

class SiderLayout extends React.Component {
    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        console.log(collapsed);
        this.setState({ collapsed });
    };
    render() {
        return (
            <Router>
                <Layout style={{ minHeight: '100vh' }}>
                    <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
                        <div className="logo" />
                        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                            <SubMenu
                                key="d3s"
                                title={
                                    <span>
                                        <Icon type="user" />
                                        <span>d3</span>
                                    </span>
                                }
                            >
                                <Menu.Item key="3"><Link to='/maths'>maths</Link></Menu.Item>
                                <Menu.Item key="3"><Link to='/transition'>动画效果</Link></Menu.Item>
                                <Menu.Item key="3"><Link to='/circle'>circle</Link></Menu.Item>
                                <Menu.Item key="4"><Link to='/bar'>bar</Link></Menu.Item>
                                <Menu.Item key="13"><Link to='/d3'>all</Link></Menu.Item>
                                <Menu.Item key="21"><Link to='/d3/basic'>d3/basic</Link></Menu.Item>
                                <Menu.Item key="20"><Link to='/selection'>selection</Link></Menu.Item>
                            </SubMenu>
                            <SubMenu
                                key="sub3"
                                title={
                                    <span>
                                        <Icon type="team" />
                                        <span>other</span>
                                    </span>
                                }
                            >
                                <Menu.Item key="10"><Link to='/about'>关于</Link></Menu.Item>
                                <Menu.Item key="11"><Link to='/subs'>主题列表</Link></Menu.Item>
                                <Menu.Item key="12"><Link to='/flexLayout'>flexLayout</Link></Menu.Item>
                            </SubMenu>

                        </Menu>

                    </Sider>
                    <Layout>
                        <Header style={{ background: '#fff', padding: 0 }} />
                        <Content style={{ margin: '0 16px' }}>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>
                                    <LocationDisplay />
                                </Breadcrumb.Item>
                                {/* <Breadcrumb.Item>User</Breadcrumb.Item>
                            <Breadcrumb.Item>Bill</Breadcrumb.Item> */}
                            </Breadcrumb>
                            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                                <Route exact path="/flexLayout" component={FlexLayout} />
                                <Route exact path="/about" component={About} />
                                <Route exact path="/subs" component={Subs} />
                                <Route exact path="/flex" component={Flex} />
                                <Route exact path="/d3/basic" component={basic} />
                                <Route exact path="/bar" component={Bar} />
                                <Route exact path="/circle" component={Circle} />
                                <Route exact path="/d3" component={D3s} />
                                <Route exact path="/transition" component={transition} />
                                <Route exact path="/selection" component={Selection} />
                                <Route exact path="/maths" component={Maths} />
                                <Route path={`/subs/:topicId`} component={Sub} />
                                
                            </div>
                        </Content>
                        <Footer style={{ textAlign: 'center' }}></Footer>
                    </Layout>
                </Layout></Router>
        );
    }
}



// const Cpp = () => {
//     return (
//         <div>
//             <h1>App</h1>
//             <ul>
//                 <li><Link to="/about">About</Link></li>
//                 <li><Link to="/inbox">Inbox</Link></li>
//             </ul>
//             {this.props.children}
//         </div>
//     )
// }

const LocationDisplay = withRouter(({ location }) => (
    <div data-testid="location-display">{location.pathname}</div>
))

const About = () => {
    return <div>about</div>
}
// 基础路由的demo
// const Routes = () => {
//     return (
//         <Router>
//             <LocationDisplay />
//             <ul>
//                 <li><Link to='/about'>关于</Link></li>
//                 <li><Link to='/subs'>主题列表</Link></li>
//                 <li><Link to='/main'>布局</Link></li>
//                 <li><Link to='/d3'>d3js</Link></li>
//                 <li><Link to='/circle'>circle</Link></li>

//             </ul>
//             {/* <Route exact path="/" component={App}/>
//             <Route exact path="/about" component={About} />
//             <Route exact path="/subs" component={Subs} />
//             <Route exact path="/flex" component={Flex} />
//             <Route exact path="/main" component={SiderLayout} />
//             <Route exact path="/d3" component={Bar} />
//             <Route exact path="/circle" component={Circle} />
//             <Route path={`/subs/:topicId`} component={Sub} /> */}
//         </Router>
//     )
// }
class Subs extends React.Component {
    render() {
        return (
            <div>
                <h1>subject</h1>
                <ul>
                    <li><Link to={`${this.props.match.url}/rendering`}>使用 React 渲染</Link></li>
                    <li><Link to={`${this.props.match.url}/components`}>组件</Link></li>
                    <li><Link to={`${this.props.match.url}/props-v-state`}>属性 v. 状态</Link></li>
                    <Route path={`/subs/:topicId`} component={Sub} />
                    <Route exact path={this.props.match.url} render={() => (
                        <h3>请选择一个主题。</h3>
                    )} />
                </ul>
            </div>
        );
    }
}
// const Subs=()=>{
//     return (
//         <div>
//             <h1>subject</h1>
//             <ul>
//                 <li><Link to={`${this.props.match.url}/rendering`}>使用 React 渲染</Link></li>
//                 <li><Link to={`${this.props.match.url}/components`}>组件</Link></li>
//                 <li><Link to={`${this.props.match.url}/props-v-state`}>属性 v. 状态</Link></li>
//                 <Route path={`${this.props.match.url}/:topicId`} component={Sub} />
//                 <Route exact path={this.props.match.url} render={() => (
//                     <h3>请选择一个主题。</h3>
//                 )} />
//             </ul>
//         </div>
//     )
// }
class Sub extends React.Component {
    constructor(p) {
        super(p)
        console.dir(p)
    }
    render() {
        return <div>{this.props.match.params.topicId}</div>
    }
}
// const Sub =()=>{
//     return <div>{this.props.match.params.topicId}</div>
// }

// const Inbox = () => {
//     return (
//         <div>
//             <h2>Inbox</h2>
//             {this.props.children || "Welcome to your Inbox"}
//         </div>
//     )
// }

// const Message = () => {
//     return <h3>Message {this.props.params.id}</h3>
// }


ReactDOM.render(
    <SiderLayout />
    , document.getElementById('root'));
serviceWorker.unregister();
